<template>
	<teleport to=".main" v-if="showComponent">
		<div @click.self="innerVisible = false" :class="{ showPreview: showTransition }" class="imagePreview top-0 start-0 position-absolute">
			<div
				class="previewImgBox position-absolute start-50 translate-x--50"
				:style="`height: 100vh;width: calc(100vh * ${imgItem.width / imgItem.height});`"
			>
				<img class="w-100 h-100" :src="imgItem.originUrl" />
				<div class="w-100 h-100 position-absolute start-0 top-0 d-flex">
					<div @click="innerCurrent !== 0 && innerCurrent--" class="flex-grow-1"></div>
					<div @click="innerCurrent !== imgList.length - 1 && innerCurrent++" class="flex-grow-1"></div>
				</div>
				<div
					class="bottomDirection hover-opacity position-absolute border border-secondary rounded-2 justify-content-between align-items-center start-50 translate-x--50 px-3 py-1"
				>
					<div>{{ innerCurrent + 1 }}/{{ imgList.length }}</div>
					<Divider class="mx-3" />
					<DownloadMusicIcon
						@click="downloadFile(imgList[innerCurrent].originUrl)"
						class="cursor-pointer"
						width="13"
						height="13"
						color="#fff"
					/>
				</div>
			</div>
			<CloseIcon
				@click="innerVisible = false"
				color="rgb(168, 168, 168)"
				class="closeIcon position-absolute cursor-pointer"
				width="46"
				height="46"
			/>
			<ArrowLeftIcon
				@click="innerCurrent--"
				class="cursor-pointer cursor-pointer position-absolute start-0 top-50 translate-y--50 ms-5"
				:style="`${innerCurrent !== 0 ? 'visibility:visible;' : 'visibility:hidden;'}`"
				color="rgb(168, 168, 168)"
				width="46"
				height="46"
			/>
			<ArrowRightIcon
				:style="`${innerCurrent !== imgList.length - 1 ? 'visibility:visible;' : 'visibility:hidden;'}`"
				@click="innerCurrent++"
				class="cursor-pointer cursor-pointer position-absolute end-0 top-50 translate-y--50 me-5"
				color="rgb(168, 168, 168)"
				width="46"
				height="46"
			/>
		</div>
	</teleport>
</template>

<script lang="ts">
import { downloadImg } from "@/utils/file";
import { computed, defineComponent, reactive, toRefs, watch } from "vue";
export default defineComponent({
	emits: ["update:visible", "update:current"],
	props: {
		visible: {
			type: Boolean,
			default: false,
		},
		imgList: {
			type: Array,
			default: () => [],
		},
		current: {
			type: Number,
			default: 0,
		},
	},
	setup(props, context) {
		const state = reactive({
			innerVisible: computed({
				get: () => props.visible,
				set: (newV) => context.emit("update:visible", newV),
			}),
			showComponent: false,
			showTransition: false,
			innerCurrent: computed({
				get: () => props.current,
				set: (newV) => context.emit("update:current", newV),
			}),
		});
		const imgItem = computed(() => props.imgList[state.innerCurrent as number]);
		watch(
			() => state.innerVisible,
			(newV) => {
				if (newV) {
					state.showComponent = true;
					setTimeout(() => {
						state.showTransition = true;
					});
				} else {
					state.showTransition = false;
					setTimeout(() => {
						state.showComponent = false;
					}, 400);
				}
			},
			{
				immediate: true,
			}
		);
		const downloadFile = (url) => {
			downloadImg(url);
		};
		return {
			...toRefs(state),
			imgItem,
			downloadFile,
		};
	},
});
</script>

<style scoped lang="scss">
.showPreview {
	transform: scale(1) !important;
	opacity: 1 !important;
}
.imagePreview {
	transform: scale(0);
	opacity: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	background-color: rgba($color: #000000, $alpha: 0.85);
	transition-property: transform, opacity;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
	.previewImgBox {
		&:hover {
			.bottomDirection {
				display: flex;
			}
		}
		.bottomDirection {
			display: none;
			color: #c7c7c7;
			bottom: 20px;
			background-color: rgba($color: #000000, $alpha: 0.8);
		}
	}

	.closeIcon {
		top: 48px;
		right: 48px;
	}
}
</style>
